<!--头部模板，页眉-->
<template>
    <Header :style="{padding: 0}" class="layout">
      <div class="layout-logo"></div>
      <!--<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu"-->
      <!--size="24"></Icon>-->
      <div class="avatar-badge" @click="avatarClick">
        <Badge dot>
          <Avatar shape="square" icon="ios-person" style="background: black;"/>
        </Badge>
        <!--<Badge dot>-->
        <!--<Avatar shape="square" icon="ios-person" />-->
        <!--</Badge>-->
        <div class="userName">
          {{username}}
        </div>
      </div>
    </Header>
</template>
<style>

</style>
<script>
  export default {
    data() {
      return {
        name: 'Header',
        theme: 'dark',
        username: '墨阳'
      }
    },
    computed: {},
    methods: {
      avatarClick: function (event) {
        alert('click')
      }
    }
  }
</script>
<style>
  .layout {
    border: 1px solid #d7dde4;
    background: #000000;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    max-height: 45px;
    /*设置半透明*/
    /*filter:alpha(Opacity=80);*/
    /*-moz-opacity:0.5;*/
    /*opacity: 0.5;*/
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 6px;
    left: 110px;
  }

  /*.menu-item span {*/
  /*display: inline-block;*/
  /*overflow: hidden;*/
  /*width: 69px;*/
  /*text-overflow: ellipsis;*/
  /*white-space: nowrap;*/
  /*vertical-align: bottom;*/
  /*transition: width .2s ease .2s;*/
  /*}*/

  /*.menu-item i {*/
  /*transform: translateX(0px);*/
  /*transition: font-size .2s ease, transform .2s ease;*/
  /*vertical-align: middle;*/
  /*font-size: 16px;*/
  /*}*/

  /*.collapsed-menu span {*/
  /*width: 0px;*/
  /*transition: width .2s ease;*/
  /*}*/

  /*.collapsed-menu i {*/
  /*transform: translateX(5px);*/
  /*transition: font-size .2s ease .2s, transform .2s ease .2s;*/
  /*vertical-align: middle;*/
  /*font-size: 22px;*/
  /*}*/

  .avatar-badge {
    float: right;
    margin-right: 102px;
    margin-top: -10px;
  }

  .avatar-badge sup {

  }

  .userName {
    /*font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;*/
    font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    float: right;
    color: #b1b2b3;
    line-height: inherit;
    top: 3px;
  }
</style>
